<template>
  <q-page class="q-pa-md" v-loading="loading">
    <el-form label-width="120px">
      <div style="position: relative; ">
        <q-breadcrumbs class="q-mb-md" style="height:50px;line-height: 40px; border-bottom: 1px dashed #ccc;">
          <q-breadcrumbs-el label="新建数据集" icon="bi-folder2-open" />
          <q-breadcrumbs-el label="数据上传及处理" icon="bi-people" />
        </q-breadcrumbs>
      </div>
      <upload-data-set @formData="formData" ref="childRef"></upload-data-set>
    </el-form>
    <div class="row" style="position:absolute;right: 50px;bottom:50px">
      <el-button @click="toDataSet">
        取消
      </el-button>
      <el-button type="primary" @click="creatData">
        保存
      </el-button>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref, reactive, shallowRef } from "vue"
import { useRouter } from 'vue-router';
import uploadDataSet from 'src/components/uploadDataSet.vue';
import { dataSetStore } from 'src/stores/dataSet';
import { ElMessage, ElMessageBox } from 'element-plus'
import { createDataset, batchUploadDatasetData, deleteDataset } from 'src/api/dataset'
const dataSetObj = dataSetStore()
const router = useRouter()
const childRef = ref()
const projectId = router.currentRoute.value.params.project_id
const deleteDataId = ref()
let creatForm = reactive({})
const uploadData = shallowRef({
  file_ids: <any>[],
  is_labeled: false,
  import_mode: 'local',
  fileUpload: true
})
const fileUploadState = ref(true)
function formData(e: any) {
  let urlArr = e.value.choices.map((item: any, index: number) => {
    return item.id
  })
  uploadData.value.file_ids = urlArr
  uploadData.value.is_labeled = e.value.is_labeled
  uploadData.value.import_mode = e.value.import_mode
  fileUploadState.value = e.value.fileUpload
  creatForm = dataSetObj.createDataSetObj
}

function toDataSet() {
  router.push({ name: 'dataset', params: { project_id: projectId } })
}
const loading = ref(false)
function creatData() {
  if (fileUploadState.value == true) {
    ElMessage.error('文件正在上传,请等待')
    return
  }
  if (uploadData.value.file_ids.length == 0) {
    ElMessage.error('请选择上传文件')
    return
  }

  loading.value = true
  createDataset(projectId, creatForm).then((res: any) => {
    deleteDataId.value = res.data.id
    batchUploadDatasetData(projectId, res.data.id, uploadData.value).then((res: any) => {
      ElMessageBox.alert('创建数据成功', '提示', {
        confirmButtonText: '知道了',
        autofocus: false
      }).then(() => {
        router.push({ name: 'dataset', params: { project_id: projectId } })
        dataSetStore().setPageData(1)
      })
      loading.value = false
    }).catch(() => {
      deleteData(deleteDataId.value)
      loading.value = false
    })
  }).catch(() => {
    loading.value = false
  }).finally(() => {
      dataSetStore().fileType('')
    })
}
// 创建数据出错时，删除已新建的数据集合
function deleteData(id: number) {
  deleteDataset(projectId, id).then((res: any) => {
    console.log('delete success')
  })
}
</script>

<style scoped lang="scss">
.labelContent {
  margin-top: -40px;

  &::v-deep .el-form-item__label {
    visibility: hidden;
  }

  .oterFromBox {
    margin-left: -40px;

    .el-form-item {
      margin-bottom: 10px;
    }

    &::v-deep .el-form-item__label {
      visibility: initial;
    }

  }

  &::v-deep .el-upload-list {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      width: 5px;
    }

    &::-webkit-scrollbar-track {
      background: rgb(206, 206, 206);
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgb(95, 107, 213);
      border-radius: 10px;
    }
  }

  .uploadBox {
    .uploadBoxBtn {
      text-align: center;

      .el-image {
        width: 56px;
        height: 56px;
        display: block;
        margin: 0 auto;
      }

      div {
        font-size: 12px;
        height: 20px;
      }

    }
  }
}
</style>
